<template>
   <div class="icons">
     <swiper :options="swiperOption" v-if="showIcon">
       <swiper-slide v-for="(page,index) in pages" :key="index">
         <div class="icon" v-for="item in page" :key="item.id">
           <div class="icon-img">
             <img class="icon-img-content" :src="item.imgUrl" alt="">
           </div>
           <p class="icon-desc">{{item.desc}}</p>
         </div>
       </swiper-slide>
     </swiper>
     <!-- Optional controls -->
     <div class="swiper-paginations icon-swiper-pagination"  slot="pagination"></div>
   </div>
</template>

<script>
  export default{
    name:'HomeIcons',
    props:{
      list:Array
    },
    data(){
      return{
        swiperOption:{
          pagination:'.swiper-paginations',
          loop:true
        }
      }
    },
    computed: {
      pages () {
        const pages = []
        this.list.forEach((item,index)=>{
          const page = Math.floor(index/8)
          if(!pages[page]){
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages
      },
      showIcon(){
        return this.list.length
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .icons >>> .swiper-pagination-bullet{
    margin-left:0.1rem;
    margin-right:0.1rem;
  }
  .icons >>> .swiper-pagination-bullet-active{
    background: rgba(0,175,190,.8);
  }
 .icons {
   overflow: hidden;
   height: 0;
   padding-bottom: 55%;
   position:relative;
   .icon {
     position: relative;
     overflow: hidden;
     float: left;
     width: 25%;
     height:0;
     padding-bottom: 25%;
     .icon-img {
       position: absolute;
       top: .22rem;
       left: 0;
       right: 0;
       bottom: .22rem;
       box-sizing: border-box;
       padding: .1rem;
       .icon-img-content {
         display: block;
         margin: 0 auto;
         height: 100%;
       }
     }
     .icon-desc {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       height: .44rem;
       line-height: .44rem;
       color:$darkTextColor;
       text-align:center;
       ellipsis();
     }
   }
   .icon-swiper-pagination{
     left:0;
     right:0;
     text-align:center;
   }
 }
</style>
